<template>
<div>
    <van-field
        :class="{'active':focusIdx==config.key}"
        v-model="config.value"
        :label="config.label"
        :required="config.must"
        readonly
        :disabled="config.disabled"
        :placeholder="config.placeholder"
        @click="onPicker"
    >
    </van-field>
    <van-popup v-model="pickerShow" position="bottom">
        <van-area :area-list="areaList" :columns-num="config.cols" :title="config.title"  @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>
</div>
    
</template>

<script>
import AreaData from '../assets/js/area';
export default {
    data() {
        return {
            areaList: AreaData,
           focusIdx: null,
           pickerShow: false
        };
    },
    props: ['config'],
    methods: {
        onPicker() {
            this.focusIdx = this.config.key;
            this.pickerShow = true;
        },
        onConfirm(value) {
            if (this.config.cols == 2) {
                this.config.value = value[0].name + ' ' + value[1].name;
                this.$store.commit('SET_PROVINCECITYDISTRICT', this.config.value);
                this.$store.commit('SET_PROVINCE', value[0].name);
                this.$store.commit('SET_CITY', value[1].name);
            }
            if (this.config.cols == 3) {
                this.config.value = value[0].name + ' ' + value[1].name + ' ' + value[2].name;
                this.$store.commit('SET_PROVINCECITYDISTRICT', this.config.value);
                this.$store.commit('SET_PROVINCE', value[0].name);
                this.$store.commit('SET_CITY', value[1].name);
                this.$store.commit('SET_DISTRICT', value[2].name);
            }
            this.pickerShow = false;
            this.focusIdx = null;
        },
        onCancel() {
            this.pickerShow = false;
            this.focusIdx = null;
        }
    }
  };
</script>

<style>
</style>
